<template>
  <div class="main-header">
        <div class="main_he_left">
          <img src="../../../static/image/logo.png" />
        </div>
        <div class="navbar-custom-menu">
          <div class="navbar-nav">
            <!-- <div class="user-menu shou" @click="eleFun">
              <div class="menu-tu"><img src="../../../static/image/dl.png"/></div>
              <div class="hidden-xs">首页</div>
            </div> -->

            <div class="user-menu shou" @click="ztFun">
            <div class="menu-tu"><img src="../../../static/image/ztt.png"/></div>
            <div class="hidden-xs"  >工况图</div>
          </div>

          <div class="user-menu shou" @click="ssFun">
            <div class="menu-tu"><img src="../../../static/image/pdg.png" /></div>
            <div class="hidden-xs">测温监测</div>
          </div>

          <div class="user-menu shou" @click="jfFun">
            <div class="menu-tu"><img src="../../../static/image/pdg.png" /></div>
            <div class="hidden-xs">局放监测</div>
          </div>
          <div class="user-menu shou" @click="ywFun">
            <div class="menu-tu"><img src="../../../static/image/pdg.png" /></div>
            <div class="hidden-xs">烟雾监测</div>
          </div>
          <div class="user-menu shou" @click="thFun">
            <div class="menu-tu"><img src="../../../static/image/pdg.png" /></div>
            <div class="hidden-xs">环境监测</div>
          </div>
          <div class="user-menu shou" @click="hjFun">
            <div class="menu-tu"><img src="../../../static/image/pdg.png"/></div>
            <div class="hidden-xs">能耗监测</div>
          </div>
          <div class="user-menu shou" @click="dyFun">
            <div class="menu-tu"><img src="../../../static/image/cgqdy.png"/></div>
            <div class="hidden-xs">设备状态</div>
          </div>
          <div class="user-menu shou" @click="bjFun">
            <div class="menu-tu"><span v-if="projectId==1"><img src="../../../static/image/bjxt-h.gif"/></span>
            <span v-else><img src="../../../static/image/bjxt.png"/></span> </div>
            <audio id="audio" src="../../../static/image/bim.mp3"  ref="audio"  loop="loop"/>
            <div class="hidden-xs">报警查询</div>
          </div>

          <!-- <div class="user-menu shou" @click="szFun">
              <div class="menu-tu"><img src="../../../static/image/shezhi.png"/></div>
              <div class="hidden-xs">系统设置</div>
          </div> -->



          </div>
          <!-- 右侧退出 -->
          <div class="tuichu">
             <div @click="guanbi" class="bjyangshi shou" ><span v-if="panduan == 'guanbi'"><img src="../../../static/image/baojing.png"></span>
             <span v-else><img src="../../../static/image/guanbibaojing.png"></span>
             </div>
            <div class="tui_wen">{{name}}</div>
            <div class="tui_wen sz_icon shou"
              ><a @click="szFun"> 系统设置 </a></div
            >
            <div class="tui_wen tui_icon shou"
              ><a @click="loginOut"> 退出 </a></div
            >
          </div>
        </div>
        <!-- </nav> -->
      </div>
</template>
<script>
import { number } from 'echarts'
export default {
  props: {
    projectId:{type:Number,
    default:0
    },
       // 接受值并定义传递值类型
  },
  data(){
    return {
      // baojing:false,
      name:'',
      panduan:false
    }
  },
  created(){
    this.panduan = this.$auth.get("kaiguan")
    console.log('判断',this.panduan)
  },
  mounted(){
    console.log('报警',this.projectId)
    this.name = this.$auth.get("name")
//  this.warningfun()
// this.startplay()
  },
  watch:{
    projectId(){
      console.log("zhe")
      this.startplay()
    },
    panduan(neval,oldval){
      console.log('新值',neval)
      this.$auth.set("kaiguan",neval)


    }
  },
  methods:{
    startplay(){
        this.$refs.audio.currentTime = 0; //从头开始播放提示音
        if(this.projectId == 1 && this.panduan == 'kaiqi'){
          this.$refs.audio.play(); //播放
        }else{
          this.$refs.audio.pause()
        }
    },
    guanbi(){
       console.log(this.panduan)
       if( this.panduan == 'kaiqi'){
         this.panduan = 'guanbi'
       }else{
         this.panduan = 'kaiqi'
       }

       console.log(this.panduan)
       this.startplay()
    },
    loginOut(){
      this.$auth.remove('token'),
      // this.$auth.remove('tokenTime')
      this.$router.push({path:'/login'})
    },
     ssFun(){
      this.$router.push({path:'/ele'})
    },
    ywFun() {
      this.$router.push({ path: '/yanwu' })
    },
    thFun(){
      this.$router.push({path:'/tah'})
    },
    bjFun(){
      this.$router.push({path:'/warn'})
    },
    dyFun(){
      this.$router.push({path:'/voltage'})
    },
    ztFun(){
      this.$router.push({path:'/configuration'})
    },
    szFun(){
      this.$router.push({path:'/limit'})
    },
    jfFun(){
      this.$router.push({path:'/radio'})
    },
    eleFun(){
      this.$router.push({path:'/'})
    },
    hjFun(){
      this.$router.push({path:'/nhjiance'})
    }


  }
}
</script>

<style scoped>
.main-header{height:89px;width: 100%;background-image: url(../../../static/image/topbg.png);background-repeat: no-repeat; display: flex;
justify-content: space-between;}
.main_he_left{ padding: 10px 30px 10px 30px; width: 60%; }
.navbar-custom-menu{ width:100%; padding-top: 3px; display: flex; justify-content: space-between;margin-right: 20px;}
.navbar-nav{ width:590px; height: 100px;background-image: url(../../../static/image/navbg.png);background-repeat: no-repeat;
	display: flex; padding-top: 5px;background-size: 600px 70px;}
.user-menu{ width: 20%; text-align: center;  color: #FFFFFF; font-size: 15px; height: 60px;background: url(../../../static/image/line.png) no-repeat  right center;}
.menu-tu{width:100%; height:30px; padding-top:4px;}
.hidden-xs{ padding-top: 7px;}
.user-menu:last-child{background-image:none}
.tuichu{ color: #FFFFFF; padding-top: 30px; padding-right:30px;  width: 300px; display: flex; }
.sz_icon{ background: url(../../../static/image/shezhi.png) no-repeat left center;height: 20px;line-height:25px; margin-left: 10px; padding-left: 35px;}
.tui_icon{ background: url(../../../static/image/tuichu.png) no-repeat left center;height: 20px;line-height:25px; margin-left: 10px; padding-left: 25px;}
.tui_wen{ height:25px; line-height: 25px; font-size:14px;}
.bjyangshi{img{width:100%; height: 25px; margin-top: 1px; padding-right: 10px;} }
.shou{cursor: pointer;}
</style>